<template>
	<el-dialog :title="title" :visible.sync="dialogVisible" size="large" :close-on-click-modal="false" :close-on-press-escape="false" :before-close="off" :top="dialog_margin_top">
		<el-table :data="formData.props" border style="width: 100%;" :highlight-current-row="true">
			<el-table-column prop="propscname" label="因子" min-width="20">
			      <template scope="scope">
				<select :id="'propscname' + scope.row.rowId"></select>
			      </template>
			</el-table-column>
			<el-table-column prop="propstype" label="类型" min-width="20">
			      <template scope="scope">
				<select :id="'propstype' + scope.row.rowId" @change="propsTypeChange(scope.row)">
					<option value="0">固定值</option>
					<option value="1">区间值</option>
				</select>
			      </template>
			</el-table-column>
			<el-table-column prop="propsvalue" label="值" min-width="120">
			      <template scope="scope">
			      	<div :id="'single'+scope.row.rowId">
			      		<input :id="'propsvalue' + scope.row.rowId" size="100"></input>
			      	</div>
			      	<div :id="'multi'+scope.row.rowId" style="display:none">
			      		<input :id="'startvalue' + scope.row.rowId" ></input> 至
			      		<input :id="'endvalue' + scope.row.rowId" ></input>
			      	</div>
			      </template>
			</el-table-column>
			<el-table-column label="操作" min-width="15" fixed="right">
				<template scope="scope">
					<el-button size="small" type="danger"  @click="delProps(scope.row.rowId)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		<br>
		<el-form label-width="150px" >
			  <el-row :span="24">
			  	<el-col :span="6">
					<el-button type="primary" size="small" @click="addProps">添加因子项</el-button>
			  	</el-col>
			  </el-row>
		</el-form>
		  <span slot="footer" class="dialog-footer">
			   <el-button type="warning" @click="save()">保存</el-button>
			   <el-button type="default" @click="off()">关闭</el-button>
		  </span>
	</el-dialog>
</template>

<script>
import PropsAPI from "../../../../js/production/props/propsAPI"
export default {
	data() {
		return {
			dialog_margin_top: '5%',
			dialogVisible: true,
			formData: {
			       plan : {},
			       props : [],
			},
			title: '',
			propsOptions: [],
			propsStr : '',
			index : 0,
		}
	},
	mounted() {
		this.formData.plan = Object.assign({}, this.$parent.selectedRows[0]);
		this.title = "【" + this.formData.plan.plancode + "-" + this.formData.plan.plancname + "】因子配置";
		PropsAPI.initPlanProps(this);
		PropsAPI.initPropsSelect(this);
		for(let i = 0;i < this.propsOptions.length; i++) {
			this.propsStr += "<option value='"+ this.propsOptions[i].propscode +"'>"+ this.propsOptions[i].propscname +"</option>";
		}
		let vm = this;
		let props = this.formData.props;
		setTimeout(function() {
			for(let i = 0; i < props.length; i++) {
				let id = i + 1;
				$("#propscname" + id).html(vm.propsStr);
				$("#propscname" +  id).val(props[i].propscode);
				$("#propstype" +  id).val(props[i].propstype);
				$("#propsvalue" +  id).val(props[i].propsvalue);
				$("#startvalue" +  id).val(props[i].startvalue);
				$("#endvalue" +  id).val(props[i].endvalue);
				vm.propsTypeChange(props[i]);
			}
		},100);
	},
	methods: {
		propsTypeChange(row) {
			if($("#propstype" + row.rowId).val() === '1') {
				$("#single" + row.rowId).hide();
				$("#multi" + row.rowId).show();
			} else if($("#propstype" + row.rowId).val() === '0') {
				$("#single" + row.rowId).show();
				$("#multi" + row.rowId).hide();
			}
		},
		save() {
			for(let i = 0;i < this.formData.props.length; i++) {
				let id = this.formData.props[i].rowId;
				this.formData.props[i].plancode = this.formData.plan.plancode;
				this.formData.props[i].riskcode = this.formData.plan.riskcode;
				this.formData.props[i].riskversion = this.formData.plan.riskversion;
				this.formData.props[i].propscode = $("#propscname" +  id).val();
				this.formData.props[i].propstype = $("#propstype" +  id).val();
				this.formData.props[i].propsvalue = $("#propsvalue" +  id).val();
				this.formData.props[i].startvalue = $("#startvalue" +  id).val();
				this.formData.props[i].endvalue = $("#endvalue" +  id).val();
			}
			PropsAPI.add(this);
		},
		off() {
			this.$parent.showLinkPropsDialog = false;
		},
		addProps() {
			let vm = this;
			let index = ++this.index;
			this.formData.props.push({rowId : index});
			setTimeout(function() {
				$("#propscname" + index ).html(vm.propsStr);
			},100);
		},
		delProps(rowId) {
			let tempArray = [];
			let tempId = 1;
			for(let i = 0;i < this.formData.props.length; i++) {
				let id = this.formData.props[i].rowId;
				if(rowId !== id) {
					this.formData.props[i].propscname = $("#propscname" + id).val();
					this.formData.props[i].propstype = $("#propstype" + id).val();
					this.formData.props[i].propsvalue = $("#propsvalue" + id).val();
					this.formData.props[i].startvalue = $("#startvalue" + id).val();
					this.formData.props[i].endvalue = $("#endvalue" + id).val();
					this.formData.props[i].rowId = tempId++;
					tempArray.push(this.formData.props[i]);
				}
			}
			this.index = tempArray.length;
			this.formData.props = tempArray;
			let vm = this;
			for(let i = 0; i < tempArray.length; i++) {
				let id = i + 1;
				$("#propscname" +  id).val(tempArray[i].propscname);
				$("#propstype" +  id).val(tempArray[i].propstype);
				$("#propsvalue" +  id).val(tempArray[i].propsvalue);
				$("#startvalue" +  id).val(tempArray[i].startvalue);
				$("#endvalue" +  id).val(tempArray[i].endvalue);
				vm.propsTypeChange(tempArray[i]);
			}
		}
	}
  }
</script>